<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

        :root {
            --sz: 9vmin;
            --on: #4CAF50;
            --of: #f50000;
            --gr: #666666;
            --tr: all 0.5s ease 0s;
            --lg: var(--of);
        }

        * {
            box-sizing: border-box;
            transition: var(--tr);
        }

        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(45deg, #1c2123, #1f2425);
            font-family: 'Roboto', Arial, Helvetica, serif;
        }

        body:before, body:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background:
                    repeating-conic-gradient(#0002 0.00005%, #fff0 .0005%, #fff0 .005%, #fff0 .0005%),
                    repeating-conic-gradient(#0002 0.00001%, #fff0 .00009%, #fff0 .00075%, #fff0 .000025%);
            opacity: 0.75;
            filter: blur(0.75px);
        }

        .toggle {
            position: relative;
            width: calc(var(--sz) * 6);
            height: calc(var(--sz) * 2);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        input {
            display: none;
        }

        label[for=btn] {
            position: absolute;
            width: calc(var(--sz) * 6);
            height: calc(var(--sz) * 2);
            background: #616774;
            border-radius: var(--sz);
            box-shadow:
                    0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0006,
                    0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #000d,
                    0 0px calc(var(--sz) / 10) calc(var(--sz) / 50) #fff8,
                    0 -4px calc(var(--sz) / 5) calc(var(--sz) / 50) #000c;
        }

        .track {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: var(--sz);
            overflow: hidden;
            background: #191e1e;
            box-shadow: 0 calc(var(--sz) / 3) calc(var(--sz) / 2) 0 #000 inset;
        }

        #btn:checked + label .track:before {
            left: 0%;
        }

        .thumb {
            position: absolute;
            width: calc(calc(var(--sz) * 2) - calc(var(--sz) / 5));
            height: calc(calc(var(--sz) * 2) - calc(var(--sz) / 5));
            top: calc(calc( var(--sz) / 10) + calc(var(--sz) / 200));
            left: calc(calc( var(--sz) / 10) + calc(var(--sz) / 100));
            background: linear-gradient(180deg,  #3f4447, #262727);
            border-radius: var(--sz);
            box-shadow: calc(var(--sz) / -25) calc(var(--sz) / 25) calc(var(--sz) / 30) 0 #fff2 inset, 0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            overflow: hidden;
            animation: move-thumb 0.5s ease 0s;
        }

        @keyframes move-thumb {
            0% {
                --lg: var(--of);
                left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc( var(--sz) / 10) + calc(var(--sz) / 7)));
            }
            25%, 75% {
                --lg: #999999;
            }
            100% {
                --lg: var(--on);
                left: calc(calc( var(--sz) / 10) + calc(var(--sz) / 100));
            }
        }

        .thumb:before {
            content: "";
            --cl: #2c3133;
            position: absolute;
            background: var(--cl);
            width: calc(var(--sz) / 12);
            height: calc(var(--sz) / 1.35);
            border-radius: var(--sz);
            box-shadow: calc(var(--sz) /5) 0 0 0 var(--cl), calc(var(--sz) / -5) 0 0 0 var(--cl);
            filter: drop-shadow(0px 1px 2px #000) drop-shadow(0px -1px 0px #fff4) blur(0.65px);
        }

        .thumb:after {
            content: "";
            position: absolute;
            background: radial-gradient(circle at 50% 55%, #fff0 calc(var(--sz) / 1.125), var(--lg) calc(var(--sz) / 0.9));
            width: 100%;
            height: 100%;
            border-radius: var(--sz);
            transition: var(--tr);
            transition-property: --lg;
            animation: shine-thumb-off 0.5s ease 0s 1;
            animation-fill-mode: forwards;
        }

        #btn:checked + label .thumb {
            left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc( var(--sz) / 10) + calc(var(--sz) / 7)));

        }

        #btn:checked + label .thumb:after {
            animation: shine-thumb-on 0.5s ease 0s 1;
            animation-fill-mode: forwards;
            transition: var(--tr);
            transition-property: --lg;
        }

        @keyframes shine-thumb-on {
            0% { --lg: var(--of); }
            50% { --lg: var(--gr); }
            100% { --lg: var(--on); }
        }

        @keyframes shine-thumb-off {
            0% { --lg: var(--on); }
            50% { --lg: var(--gr); }
            100% { --lg: var(--of); }
        }

        .track-top, .track-bot  {
            position: absolute;
            width: 120%;
            height: calc(var(--sz) / 2.25);
            left: -10%;
            top: calc(var(--sz) / -2.5);
            transform-origin: 22% 100%;
            transform: rotate(5deg);
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            opacity: 0.85;
            animation: t-top-l 0.5s ease 0s 1 reverse;
            animation-fill-mode: forwards;
        }

        .track span span {
            background:
                    linear-gradient(0deg, #fff8, #fff0),
                    linear-gradient(180deg, #222, #666);
            width: calc(var(--sz) / 1.6);
            height: calc(var(--sz) / 2);
            display: inline-flex;
            border-radius: 0 0 calc(var(--sz) / 8) calc(var(--sz) / 8);
            box-shadow: 0 0 1px 0 #fff;
        }

        .track-bot span {
            background:
                    linear-gradient(180deg, #fff8, #fff0),
                    linear-gradient(0deg, #222, #666) !important;
            border-radius: calc(var(--sz) / 8) calc(var(--sz) / 8) 0 0 !important;
        }

        .track-bot {
            left: -10%;
            top: inherit;
            bottom: calc(var(--sz) / -2.25);
            transform-origin: 22% 100%;
            transform: rotate(-5deg);
            animation: t-bot-l 0.5s ease 0s 1 reverse;
            animation-fill-mode: forwards;
        }

        #btn:checked + label .track .track-top {
            animation: t-top-r 0.5s ease 0s 1;
            animation-fill-mode: forwards;
        }

        @keyframes t-top-r {
            0% { transform: rotate(5deg); transform-origin: 22% 100%; }
            50% { transform: rotate(0deg);  transform-origin: 22% 100%; }
            50.01% { transform: rotate(0deg);  transform-origin: 78% 100%; }
            100% { transform: rotate(-5deg);  transform-origin: 78% 100%; }
        }
        @keyframes t-top-l {
            0% { transform: rotate(5deg); transform-origin: 22% 100%; }
            50% { transform: rotate(0deg);  transform-origin: 22% 100%; }
            50.01% { transform: rotate(0deg);  transform-origin: 78% 100%; }
            100% { transform: rotate(-5deg);  transform-origin: 78% 100%; }
        }

        #btn:checked + label .track .track-bot {
            animation: t-bot-r 0.5s ease 0s 1;
            animation-fill-mode: forwards;
        }

        @keyframes t-bot-r {
            0% { transform: rotate(-5deg); transform-origin: 22% 100%; }
            50% { transform: rotate(0deg);  transform-origin: 22% 100%; }
            50.01% { transform: rotate(0deg);  transform-origin: 78% 100%; }
            100% { transform: rotate(5deg);  transform-origin: 78% 100%; }
        }
        @keyframes t-bot-l {
            0% { transform: rotate(-5deg); transform-origin: 22% 100%; }
            50% { transform: rotate(0deg);  transform-origin: 22% 100%; }
            50.01% { transform: rotate(0deg);  transform-origin: 78% 100%; }
            100% { transform: rotate(5deg);  transform-origin: 78% 100%; }
        }


        .lights {
            position: absolute;
            width: 100%;
            height: calc(var(--sz) / 1.75);
            top: calc(var(--sz) * -1.2);
            display: flex;
            justify-content: space-between;
            padding: 0 calc(var(--sz) / 1.5);
            z-index: 1;
        }

        .lights span {
            background: #121212;
            position: relative;
            width: calc(var(--sz) / 1.75);
            height: calc(var(--sz) / 1.75);
            border-radius: var(--sz);
            box-shadow:
                    0 0px calc(var(--sz) / 50) calc(var(--sz) / 50) #0008,
                    0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #000,
                    0 2px calc(var(--sz) / 10) calc(var(--sz) / 500) #fff8,
                    0 0px calc(var(--sz) / 20) calc(var(--sz) / 25) #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lights span:before {
            content: "off";
            font-size: calc(var(--sz) / 2.4);
            text-align: center;
            width: 200%;
            position: absolute;
            top: calc(var(--sz) / -1.45);
            left: -50%;
            color: #ffffff3d;
            text-shadow: 0px -2px 2px #0008, 0px 1px 2px #fff4;
            background: -webkit-linear-gradient(#0000003b 25%, var(--lg) 75%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: #71717170;
        }

        .lights span + span:before {
            content: "on";
            --lg: var(--gr);
        }

        .lights span:after {
            content: "";
            color: #fff;
            transition: var(--tr);
            width: calc(100% - calc(var(--sz) / 15));
            height: calc(100% - calc(var(--sz) / 15));
            position: absolute;
            background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3));
            border-radius: var(--sz);
            box-shadow:
                    0 0px calc(var(--sz) / 50) calc(var(--sz) / 50) #0008 inset,
                    0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #000 inset,
                    0 2px calc(var(--sz) / 10) calc(var(--sz) / 500) #fff8 inset,
                    0 0px calc(var(--sz) / 20) calc(var(--sz) / 25) #000 inset;
        }


        /* off */
        span.light-off:after {
            box-shadow:
                    0 0 calc(var(--sz) / 2.5) 0 var(--lg),
                    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset,
                    0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000 inset;
            background: radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), #fff8 calc(var(--sz) / 3) calc(var(--sz) / 3));
        }

        #btn:checked + label + .lights span.light-off:after {
            box-shadow:
                    0 0 calc(var(--sz) / 3) 0 #f5000020,
                    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #f5000020 inset;
            background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3));
        }


        /* on */
        span.light-on:after {
            box-shadow:
                    0 0 calc(var(--sz) / 3) 0 #00f56d20,
                    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #00f56d20 inset;
        }

        #btn:checked + label + .lights span.light-on:after {
            --lg: var(--on);
            box-shadow:
                    0 0 calc(var(--sz) / 2.5) 0 var(--lg),
                    0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset,
                    0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000 inset;
            background: radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), #fff2 calc(var(--sz) / 3) calc(var(--sz) / 3));
        }

        #btn:checked + label + .lights span.light-on:before {
            --lg: var(--on);
        }

        #btn:checked + label + .lights span.light-off:before {
            --lg: var(--gr);
        }
    </style>
</head>
<body>
<div class="toggle">

    <input type="checkbox" id="btn">
    <label for="btn">
		<span class="track">
			<span class="track-top">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</span>
			<span class="track-bot">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</span>
		</span>
        <span class="thumb"></span>
    </label>
    <div class="lights">
        <span class="light-off"></span>
        <span class="light-on"></span>
    </div>

</div>

</body>
</html>